<template>
  <!-- 外协单详情 -->
  <div
    class="externalAssistanceDetail"
    v-if="info"
  >
    <div class="g-con">
      <div class="grid-2">
        <div>{{ t('externalAssistanceOnlineQuotation.l2') }}: {{ info.orderNo }}</div>
        <div>{{ t('externalAssistanceOnlineQuotation.l2_2') }}: {{ info.assistOrderName }}</div>
      </div>

      <ShippingInfo
        v-if="info.shcwShippingVo"
        :data="info.shcwShippingVo"
      />

      <div
        class="info mt-3"
        v-else
      >
        <div class="tit">{{ t('externalAssistanceOnlineQuotation.t1') }}</div>
        <div class="con flexsb mt-2">
          <div>{{ t('ProcurementOnlineQuotation.l4') }}: {{ info.shipRepairYardName }}</div>
          <div>{{ t('ProcurementOnlineQuotation.l5') }}:{{ info.repairYardCountries }}</div>
          <div>{{ t('ProcurementOnlineQuotation.l6') }}:{{ info.repairYardArea }}</div>
        </div>
      </div>

      <!-- <div class="info mt-3">
        <div class="tit">{{ t('externalAssistanceOnlineQuotation.l3') }}</div>
        <div class="con mt-2">
          {{ info.assistStatement }}
        </div>
      </div> -->

      <div class="info mt-3">
        <div class="tit">{{ t('externalAssistance.step2page.form.t2') }}</div>
        <div class="con mt-2">
          <div
            class="con mt-2"
            v-if="[63, 64].includes(info.projectLargeId)"
          >
            <div class="grid-3 gap-1">
              <div>{{ t('externalAssistance.step2page.form.l2') }}: {{ info.harbor }}</div>
              <div>{{ t('externalAssistance.step2page.form.l3') }}: {{ dateFormat(info.arrivalTime, 3) }}</div>
              <div>{{ t('externalAssistance.step2page.form.l4') }}: {{ dateFormat(info.departureTime, 3) }}</div>
              <div>{{ t('externalAssistance.step2page.form.l5') }}: {{ info.agent }}</div>
              <div>{{ t('dockRepair.label3') }}: {{ getDictLabel('currency', info.quoteOrderCurrency) }}</div>
            </div>
            <div class="mt-1">
              <div>{{ t('externalAssistance.step2page.form.l6') }}: {{ info.requestDescription }}</div>
            </div>
          </div>

          <div
            class="con mt-2"
            v-if="[65].includes(info.projectLargeId)"
          >
            <div class="grid-4 gap-1">
              <div>{{ t('externalAssistance.step2page.form.l7') }}: {{ info.servicePersonCount }}</div>
              <div>{{ t('externalAssistance.step2page.form.l8') }}: {{ info.serviceLocation }}</div>
              <div>{{ t('externalAssistance.step2page.form.l9') }}: {{ dateFormat(info.serviceTime, 3) }}</div>
              <div>{{ t('externalAssistance.step2page.form.l10') }}: {{ info.serviceDayCount }}</div>
              <div>{{ t('dockRepair.label3') }}: {{ getDictLabel('currency', info.quoteOrderCurrency) }}</div>
            </div>
            <div class="mt-1">
              <div>{{ t('externalAssistance.step2page.form.l6') }}: {{ info.requestDescription }}</div>
            </div>
          </div>

          <div
            class="con mt-2"
            v-if="[66].includes(info.projectLargeId)"
          >
            <div class="grid-3 gap-1">
              <div>{{ t('externalAssistance.step2page.form.l2') }}: {{ info.harbor }}</div>
              <div>{{ t('externalAssistance.step2page.form.l3') }}: {{ dateFormat(info.arrivalTime, 3) }}</div>
              <div>{{ t('externalAssistance.step2page.form.l4') }}: {{ dateFormat(info.departureTime, 3) }}</div>
              <div>{{ t('dockRepair.label3') }}: {{ getDictLabel('currency', info.quoteOrderCurrency) }}</div>
            </div>
            <div class="mt-1">
              <div>{{ t('externalAssistance.step2page.form.l6') }}: {{ info.requestDescription }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('procurement.step2page.form.l2') }}</div>
        <div class="con mt-2">{{ info.assistOrderDetailEditVoList[0]?.projectName }}</div>
      </div>

      <div class="info mt-3">
        <div class="table">
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2
                :columns="columns"
                :data="info.assistOrderDetailEditVoList"
                :width="width"
                :height="height"
                fixed
              />
            </template>
          </el-auto-resizer>
        </div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('attachments') }}</div>
        <div class="con mt-2">
          <div
            v-for="(item, index) in info.urlList"
            :key="index"
          >
            <a
              :href="item"
              target="_blank"
            >
              {{ item }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { detailApi } from '@/service/externalAssistance'
import useDict from '@/hooks/useDict'
import { dateFormat } from '@/utils'
const { dictData, getDictData, getDictLabel } = useDict()

const { t, locale } = useI18n()

watch(locale, () => {
  init()
})

const router = useRouter()
const route = useRoute()

const id = route.query.id

onBeforeMount(() => {
  init()
})

//
const info = ref(null)
const getDetail = async () => {
  await detailApi(id).then(({ data }) => {
    info.value = data
  })
}

// 表格 列
const columns = ref([])
const getColumns = () => {
  const arr_63 = [
    {
      title: t('externalAssistance.category1Col.t1'),
      key: 'assistName',
      dataKey: 'assistName',
      width: 450
    },
    {
      title: t('externalAssistance.category1Col.tit4'),
      key: 'assistSpec',
      dataKey: 'assistSpec',
      width: 300
    },
    {
      title: t('procurement.col.t3'),
      key: 'unit',
      dataKey: 'unit',
      width: 200
    },
    {
      title: t('procurement.category4Col.tit5'),
      key: 'requireCount',
      dataKey: 'requireCount',
      width: 200
    }
  ]
  const obj = {
    63: arr_63,
    64: arr_63,
    65: [
      {
        title: t('externalAssistance.category3Col.t1'),
        key: 'assistName',
        dataKey: 'assistName',
        width: 750
      },
      {
        title: t('externalAssistance.category3Col.t2'),
        key: 'unit',
        dataKey: 'unit',
        width: 200
      },
      {
        title: t('procurement.category4Col.tit5'),
        key: 'requireCount',
        dataKey: 'requireCount',
        width: 200
      }
    ],
    66: [
      {
        title: t('externalAssistance.category3Col.t1'),
        key: 'assistName',
        dataKey: 'assistName',
        width: 750
      },
      {
        title: t('procurement.col.t3'),
        key: 'unit',
        dataKey: 'unit',
        width: 200
      },
      {
        title: t('procurement.category4Col.tit5'),
        key: 'requireCount',
        dataKey: 'requireCount',
        width: 200
      }
    ]
  }
  columns.value = [
    {
      title: t('indexNumber'),
      key: 'index',
      dataKey: 'index',
      width: 70,
      cellRenderer: ({ rowIndex }) => {
        return rowIndex + 1
      }
    },
    ...(obj[info.value.projectLargeId] || [])
  ]
}

//
const init = async () => {
  getDictData('ships_type')
  getDictData('classification_society')
  getDictData('currency')
  await getDetail()
  getColumns()
}
</script>

<style scoped lang="scss">
.externalAssistanceDetail {
  background: #f5f5f5;
  padding: 30px 0;
  margin-bottom: -76px;

  .info {
    background: #fff;
    padding: 24px;
    > .tit {
      border-bottom: 2px solid #252628;
      font-weight: bold;
      padding: 10px 0;
    }
  }

  .table {
    border-top: 2px solid #252628;
    height: 700px;

    :deep(.el-table-v2__header-cell) {
      background: #f0f3f8;
      color: #252628;
    }
    :deep(.no-save) {
      background: #f9ecd9;
    }
  }
}
</style>
